<template>
	<view class="login">
		<view class="bg">
			<image class="img wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/login_bg.png"></image>
			<view class="icon" @click="goBack">
				<image class="img wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png"></image>
			</view>
		</view>
		<view class="card">
			<view class="title">{{ "Hi~欢迎使用白菜出国" }}
				<view class="diwen"></view>
			</view>
			<view class="ft1 mt-20 c-99" style="font-weight: 400">{{
				"移民白菜价·买贵补差价"
			}}</view>
			<view class="phone flex-center ft c-ff" @click="goPhoneLogin">手机号安全登录</view>

			<view class="wexin">
				<button class="wexin  flex-center ft c-33" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					v-if="isCheck" @tap="showPop">一键登录</button>
				<view v-else class="flex-center ft c-33" style="height: 100%;" @click="showDialog">一键登录</view>

			</view>
			<!-- #ifdef MP --><!-- #endif -->

		</view>
		<view class="xieyi flex-center">

			<view class="checkBtn mr-10" v-if="!isCheck" @click="isCheck = true"></view>
			<image class="checkImg mr-10" v-else @click="isCheck = false"
				src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" />

			<view class="ft ft-20">我已阅读并同意
				<text class="c-bbq" style="color: #1F18EE;">《白菜出国服务协议》</text>、<text class="c-bbq"
					style="color: #1F18EE;">《白菜出国隐私政策》</text>
			</view>
		</view>
	</view>
	<!-- 删除弹窗 -->
	<view class="delete_box" ref="diaLogPop" v-if="show">
		<view class="bg"></view>
		<view class="delete_model bd-r40">
			<view class="ft-32 c-33 fw-800 mt-30">温馨提示</view>
			<view class="c-99 ft-28 text pd-30">
				<view class="ft ft-28">
					我已阅读并同意
					<text class="c-bbq" style="color: #1F18EE;">《白菜出国服务协议》</text>、<text class="c-bbq"
						style="color: #1F18EE;">《白菜出国隐私政策》</text>
				</view>
			</view>
			<view class="btn_model flex-eve">
				<view class="btn" @click="cancel">不同意</view>
				<view class="btn sunbmit">同意
					<button class="wexin  flex-center ft c-33 hidden-share-btn" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber" @tap="showPop"></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="js" setup>
import {
	ref
} from "vue";
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import { onLoad } from "@dcloudio/uni-app";
const show = ref(false)
const isCheck = ref(false)
const goBack = () => {
	uni.navigateBack()
}

const goPhoneLogin = () => {


	uni.navigateTo({
		url: '/subpackage/login/phoneLogin'
	})
}

const cancel = () => {
	show.value = !show.value
}
const showPop = () => {
	console.log('执行')
	// #ifdef MP
	if (isSettings.value) return
	wx.requestSubscribeMessage({
		tmplIds: ['gi4DUScen8cZatx7SQRlKrnrDW5q7AUd7va3AnvGRQA'],
		success(res) {
			console.log('res', res)
			utils.subscribeMessage(res)
		},
		fail(err) {
			console.log('err', err)
		}
		, complete(res) {
			console.log('complete', res)
			if (getPhoneType.value !== 'getPhoneNumber:ok') return
			loginFn()
			if (res['gi4DUScen8cZatx7SQRlKrnrDW5q7AUd7va3AnvGRQA'] == 'accept') {
				// console.log('登录')

			}

		}
	})
	// #endif
	// #ifdef APP-PLUS
	loginFn()
	// #endif

}
const isSettings = ref(false)
onLoad(() => {
	// #ifdef MP
	wx.getSetting({
		withSubscriptions: true,
		success(res) {
			console.log('onLoad', res)
			if (res.subscriptionsSetting.itemSettings) {
				// == 'accept'
				if (res.subscriptionsSetting.itemSettings['gi4DUScen8cZatx7SQRlKrnrDW5q7AUd7va3AnvGRQA']) isSettings.value = true
			}
		}
	})
	// #endif
})
const showDialog = () => {
	show.value = !show.value
}
const getPhoneType = ref('')
const getPhoneCode = ref('')
const getPhoneNumber = (e) => {

	console.log(e.detail.code) // 动态令牌
	console.log('==>', e.detail.errMsg) // 回调信息（成功失败都会返回）
	// console.log(e.detail.errno) // 错误码（失败时返回）

	getPhoneCode.value = e.detail.code
	uni.setStorageSync('getPhoneCode', getPhoneCode.value)
	getPhoneType.value = e.detail.errMsg


	if (!getPhoneCode.value) return show.value = false
	if (show.value) {
		isCheck.value = true
		cancel()
	}
	if (isCheck.value) {
		// 如果用户已经勾选过订阅 则直接登录 否则执行订阅过程
		if (isSettings.value) {
			loginFn()
		}

	} else {
		// utils.toast('请先勾选协议！', 1000)
		show.value = true
	}
}
const loginFn = () => {
	// 如果登录过接口 就直接登录
	if (uni.getStorageSync('openid')) {
		setLog(uni.getStorageSync('openid'))

	} else {
		// #ifdef APP-PLUS
		uni.login({
			provider: 'univerify',
			univerifyStyle: {
				fullScreen: true,  // 全屏模式
				icon: { path: "static/logo.png" } // 自定义图标
			},
			success: (res) => {
				console.log('认证成功', res);
				// 获取临时凭证 res.authResult
			},
			fail: (err) => {
				console.error('认证失败', err);
				// 可切换短信验证码登录（备用方案）:ml-citation{ref="2" data="citationList"}
			}
		});
		// #endif
		// #ifdef MP

		wx.login({
			success(rest) {
				console.log('rest', rest)
				if (rest.code) {
					//发起网络请求
					utils.toast('登录中~')
					utils.request(api.codeUserInfo, {
						code: rest.code
					}).then(function (res) {
						if (res) {
							uni.setStorageSync("openid", res.data.info.openid)
							setLog(res.data.info.openid)
							// utils.request(api.fastLogin, {
							// 	openid: res.data.info.openid,
							// 	code: getPhoneCode.value

							// }).then((data) => {

							// 	utils.toast('登录成功')
							// 	uni.setStorageSync("token", data.data.info.token)
							// 	uni.setStorageSync("userInfo", data.data.info)
							// 	setTimeout(() => {
							// 		uni.navigateBack({
							// 			delta: 1
							// 		})
							// 	}, 500)


							// })
						}
					});
				} else {
					console.log('登录失败！')
				}
			},
			fail(err) {
				// utils.toast('err~', err)

			}
		})
		// #endif
	}
}
const setLog = (openid) => {
	utils.request(api.fastLogin, {
		openid: openid,
		code: getPhoneCode.value || uni.getStorageSync('getPhoneCode')

	}).then((data) => {
		utils.toast('登录成功')
		uni.setStorageSync("token", data.data.info.token)
		uni.setStorageSync("userInfo", data.data.info)
		setTimeout(() => {
			uni.navigateBack({
				delta: 1
			})
		}, 500)


	})
}
</script>

<style lang="scss" scoped>
.login {
	width: 100%;
	// overflow-x: hidden;
	position: relative;

	.bg {
		position: relative;
		width: 750rpx;
		height: 454rpx;

		.icon {
			position: absolute;
			left: 30rpx;
			top: 108rpx;
			width: 28rpx;
			height: 48rpx;
		}
	}

	.card {
		box-sizing: border-box;
		position: absolute;
		top: 384rpx;
		left: 0;
		//border: 2rpx solid red;
		width: 750rpx;
		z-index: 99;
		height: 1040rpx;
		background: #ffffff;
		border-radius: 80rpx 0rpx 0rpx 0rpx;
		padding-left: 120rpx;
		padding-top: 120rpx;

		.title {
			//border: 2rpx solid red;
			//height: 60rpx;
			font-weight: 800;
			font-size: 44rpx;

			color: #333333;
			position: relative;

			.diwen {
				position: absolute;
				z-index: -1;
				left: 240rpx;
				top: 44rpx;
				width: 184rpx;
				height: 20rpx;
				background: #dbf046;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
			}
		}

		.phone {
			width: 510rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 584rpx;
		}

		.wexin {
			width: 510rpx;
			height: 78rpx;
			background: #dbf046;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 20rpx;
		}
	}

	.xieyi {
		position: absolute;
		left: 46rpx;
		top: 1440rpx;
		z-index: 999;
		width: 658rpx;
		height: 32rpx;


		.checkBtn {
			width: 26rpx;
			height: 26rpx;
			border: 2rpx solid #333;
			border-radius: 50%;
		}

		.checkImg {
			width: 30rpx;
			height: 30rpx;
		}
	}
}

.delete_box {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9999;


	.bg {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #000;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.delete_model {
		position: absolute;
		background-color: #fff;
		text-align: center;
		width: 518rpx;
		// height: 386rpx;
		top: calc(50% - (386rpx / 2));
		left: calc(50% - (518rpx / 2));

		.text {
			// padding: 20rpx;
			min-height: 140rpx;
		}

		.btn_model {
			margin-bottom: 30rpx;

			.btn {
				width: 184rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #333;
				background-color: #F8F8F8;
			}

			.sunbmit {
				background-color: #333;
				color: #DBF046;
				position: relative;

				.hidden-share-btn {
					opacity: 0;
					position: absolute;
					width: 184rpx;
					height: 80rpx;
					left: 0;
					top: 0;
				}
			}
		}
	}

}
</style>